<template>
	<view class="container">

		<view class="activity" v-for="item in activityList" v-if="activityList.length!==0">
			<!-- <view class="activity-type">
				{{item.type}}
			</view> -->
			<image :src="item.image" mode=""></image>
			<view class="info">
				<text class="activity-activityName">{{item.activityName}}</text>
				<view class="activity-oldPrice">
					<text>
						¥ {{item.oldPrice}}
					</text>
				</view>
				<view class="activity-price">
					¥{{item.nowPrice}}
				</view>
				<view class="activity-try">
					去抢购
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
import { getActivityList } from '../../api/activity'
import { commonDownload } from '../../common/download';
import {baseUrl,minioUrl} from '../../config.js'
	export default {
		data() {
			return {
				activityList: [

				]
			}
		},
		methods: {

		},
		onLoad() {
			getActivityList().then(res=>{
				console.log(res);
				
				for (var i = 0; i < res.data.data.length; i++) {
					res.data.data[i].image=baseUrl+'/common/download?name='+res.data.data[i].image
				}
				this.activityList=res.data.data
				
			})
		}
	}
</script>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	body {
		display: flex;
		width: 100%;
	}

	.container {
		width: 100%;
	}

	.activity {
		display: flex;
		width: 90%;
		background-color: white;
		margin: 3vh auto;
		border-radius: 2vh;
		height: 15vh;
		position: relative;
	}

	.activity image {
		margin: 2vh;
		width: 18vh;
		height: 10vh;
		display: flex;
		justify-content: left;
		border-radius: 1vh;
	}

	.info {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin-top: 2vh;
		width: 18vh;
		height: 10vh;
		display: flex;
		justify-content: left;

	}

	.activity-activityName {
		font-weight: bold;
	}

	.activity-oldPrice {
		margin: 7 0vh;
		position: absolute;
		top: 7vh;
	}

	.activity-oldPrice text {
		width: 5.2vh;
		display: inline-block;
		background-color: white;
		color: #B7B7B7;
		font-size: 1.4vh;
		text-decoration: line-through;
		padding: 0.1vh;
		font-weight: 700;
		


	}

	.activity-price {
		color: red;
		font-size: 1.5vh;
		margin-top: 1vh;
		font-weight: bold;
		position: absolute;
		top: 9vh;
	}

	.activity-try {

		background-color: #FF7803;
		color: white;
		width: 8vh;
		height: 4vh;
		text-align: center;
		border-radius: 10vh;
		line-height: 4vh;
		position: absolute;
		top: 8vh;
		right: 2vh;
		font-size: 1.5vh;
	}

	.activity-type {
		width: 3vh;
		height: 2vh;
		position: absolute;
		background-color: #FD8933;
		color: #FFFFFF;
		top: 2vh;
		left: 2vh;
		border-radius: 1vh 0vh 1vh 0vh;
		font-size: 1vh;
		text-align: center;
		line-height: 2.2vh;
	}
</style>